<!--  日期区间 dataArea - 属性面板 -->
<template>
  <div class="dataAreaAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题一：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.title"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="lab">字段标题二：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.titlelast"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单宽度：</div>
          <div class="slider">
            <t-slider v-model="attributeset.data.width" size="small" />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单列数：</div>
          <div>
            <t-radio-group
              v-model="attributeset.data.defaultWidth"
              default-value="1"
              size="small"
              @change="widthChange"
            >
              <t-radio-button value="1">一列</t-radio-button>
              <t-radio-button value="2">两列</t-radio-button>
              <t-radio-button value="3">三列</t-radio-button>
              <t-radio-button value="4">四列</t-radio-button>
            </t-radio-group>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">最小限制：</div>
          <div>
            <t-date-picker
              v-model="attributeset.data.minValue"
              size="small"
              :disableDate="minDisableDateHandle"
              clearable
              :mode="
                attributeset.data.dateType === 'dateTime'
                  ? 'date'
                  : attributeset.data.dateType
              "
              :enable-time-picker="attributeset.data.dateType === 'dateTime'"
              @change="minValueChange"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">最大限制：</div>
          <div>
            <div>
              <t-date-picker
                v-model="attributeset.data.maxValue"
                :disableDate="maxDisableDateHandle"
                size="small"
                clearable
                :mode="
                  attributeset.data.dateType === 'dateTime'
                    ? 'date'
                    : attributeset.data.dateType
                "
                :enable-time-picker="attributeset.data.dateType === 'dateTime'"
                @change="maxValueChange"
              />
            </div>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否只读：</div>
          <div><t-switch v-model="attributeset.data.isReadOnly" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题：</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">隐藏组件：</div>
          <div><t-switch v-model="attributeset.data.isShow" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否必填：</div>
          <div><t-switch v-model="attributeset.data.isMust" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">默认值：</div>
          <div>
            <t-date-range-picker
              v-model="attributeset.data.defaultValue"
              clearable
              size="small"
              :mode="
                attributeset.data.dateType === 'dateTime'
                  ? 'date'
                  : attributeset.data.dateType
              "
              :disableDate="disableDateHandle"
              :enable-time-picker="attributeset.data.dateType === 'dateTime'"
              @change="defaultValueChange"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">时间类型：</div>
          <div>
            <t-select
              v-model="attributeset.data.dateType"
              placeholder="请选择时间类型"
              size="small"
              @change="dateTypeChange"
            >
              <t-option
                v-for="item in dateTypeOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </t-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import moment from 'moment'
// import { MessagePlugin } from 'tdesign-vue-next'

const props = defineProps({
  arrtData: Object
})

let attributeset = reactive({ ...props.arrtData })

const dateTypeOptions = ref([
  {
    key: 'date',
    value: '日（day）'
  },
  {
    key: 'week',
    value: '周(week)'
  },
  {
    key: 'month',
    value: '月(month)'
  },
  // {
  //   key: 'quarter',
  //   value: '季(quarter)'
  // },
  {
    key: 'year',
    value: '年(year)'
  },
  {
    key: 'dateTime',
    value: '日期时间(dateTime)'
  }
])

// 处理列的调整宽度
const widthChange = (val) => {
  switch (val) {
    case '1':
      attributeset.data.width = 100
      break
    case '2':
      attributeset.data.width = 50
      break
    case '3':
      attributeset.data.width = 33.3
      break
    case '4':
      attributeset.data.width = 25
      break
  }
}
// 以下是处理周的限制逻辑 - 因为周不在日期计算中 所以需要转化成具体时间然后进行限制
const minDate = ref()
const maxDate = ref()
// 最小时间
const minValueChange = (val, content) => {
  const date = content.dayjsValue
  if (attributeset.data.dateType === 'week') {
    minDate.value = `${date.$y}-${date.$M + 1}-${date.$D} 12:00:00`
    attributeset.data.disableDaySt = minDate.value
  }
}
// 最大时间限制
const maxValueChange = (val, content) => {
  if (attributeset.data.dateType === 'week') {
    maxDate.value = moment(content.dayjsValue.$d)
      .subtract(7, 'days')
      .format('YYYY-MM-DD h:mm:ss')
    attributeset.data.disableDayLt = maxDate.value
  }
}
// 更改默认值 - 干掉默认当时
const defaultValueChange = (val) => {
  console.log(val)
}
// 禁用日期
const disableDateHandle = computed(() => {
  const minDay =
    attributeset.data.dateType === 'week'
      ? minDate.value
      : attributeset.data.minValue
  const maxDay =
    attributeset.data.dateType === 'week'
      ? maxDate.value
      : attributeset.data.maxValue
  const data = {
    before: minDay,
    after: maxDay
  }
  console.log(8989, data)
  return JSON.parse(JSON.stringify(data))
})
// 在选了最大日期 最小日期的范围需要调整
const minDisableDateHandle = computed(() => {
  const maxDay =
    attributeset.data.dateType === 'week'
      ? maxDate.value
      : attributeset.data.maxValue

  const data = {
    after: maxDay
  }
  for (const key in data) {
    if (!data[key]) {
      data[key] = undefined
    }
  }
  return JSON.parse(JSON.stringify(data))
})
// 在选了最小日期 最大日期的范围需要调整
const maxDisableDateHandle = computed(() => {
  const minDay =
    attributeset.data.dateType === 'week'
      ? minDate.value
      : attributeset.data.minValue
  const data = {
    before: minDay
  }
  for (const key in data) {
    if (!data[key]) {
      data[key] = undefined
    }
  }
  return JSON.parse(JSON.stringify(data))
})
// 时间类型更改
const dateTypeChange = () => {
  attributeset.data.minValue = ''
  attributeset.data.maxValue = ''
  attributeset.data.defaultValue = []
}
// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])
// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
<style lang="less" scoped>
.dataAreaAttr .t-date-range-picker {
  max-width: 220px;
}
</style>
